<template>
    <div>
        <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="100px" class="demo-orderForm">
            <el-form-item label='标签ID'>
                {{ orderForm.order }}
            </el-form-item>
            <el-form-item label='选择设备' prop='equipment'>
                <div v-for="equ in equipment_list" :key="equ.index" style="float:left">
                    <el-tooltip class="item" effect="dark" :content="equ.desc" placement="bottom-end">
                    <el-radio v-model="orderForm.equipment" :label="equ.id" border>
                        
                        
                        {{ equ.equipment }}
                        
                    </el-radio>
                    </el-tooltip>
                    &nbsp;&nbsp;
                </div>
            </el-form-item>
            
            <el-form-item label='货物类型' prop='type'>
                <div v-for="(i, index) in orderForm.type" :key='index' style="margin:10px 0 10px 0">
                    <el-select placeholder="请选择" v-model="orderForm.type[index]" @change="change_type">
                        <el-option
                            v-for="i in type_list"
                            :key='i.id'
                            :label="i.type"
                            :value='i.id'
                            :disabled="i.disabled"
                        >
                        </el-option>
                    </el-select>
                    <el-button @click='del_type(index)'>
                        删除货物类型
                    </el-button>
                </div>
                <el-button @click='add_type'>
                    添加货物类型
                </el-button>
            </el-form-item>

            <el-form-item label='客户' prop='custom'>
                    <el-select placeholder="请选择" v-model="orderForm.custom" @change="get_path()">
                        <el-option
                            v-for="i in custom_list"
                            :key='i.id'
                            :label="i.custom"
                            :value='i.id'
                        >
                        </el-option>
                    </el-select>
            </el-form-item>

            <el-form-item label='温度区间' prop='temp'>
                {{ temp_region }}
            </el-form-item>
            <el-form-item label='记录间隔' prop='period'>
                {{ orderForm.period | per }}&nbsp;分钟/次
            </el-form-item>
            <el-form-item label='启动延时' prop='delay'>
                {{ orderForm.delay }}
            </el-form-item>
            <!-- <el-form-item label='订单总价' prop='fee'>
                    <span style='color:#ba1b21'>{{ sum }}</span>
            </el-form-item> -->
            <el-form-item label='发件地址'>
                <el-input style="width:800px" v-model="office" @blur='get_path()'>
                    <el-button @click='fill_address' slot="append">添加当前公司地址</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="路线图">
                <img :src="src" alt="路线图">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('orderForm')">创建标签</el-button>
                <el-button @click="resetForm('orderForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { type_get, custom_get, equipment_get, order_post, office_get, path_post } from "../axios_api/api";
import {uuid4} from '../../config.js'
import {config,formatXml} from '../../config.js';
export default {
data() {
    return {
        src:'',
        office:'',
        valid_temp:false,
        low_temp:0,
        high_temp:0,
        equipment_list: [],
        custom_list:[],
        type_list:[],
        orderForm: {
            equipment:'',
            type: [''],
            custom: '',
            period:0,
            delay:0
        },
        rules: {
            equipment: [
                { required: true, message:'请选择设备', trigger: 'change'}
            ],
            type: [
                { required: true, message: '请选择货物类型', trigger: 'change' }
            ],
            custom:[
                { required: true, message: '请选择客户', trigger:'change'}
            ]
        }
    };
},
computed:{
    temp_region(){
        console.log(this.low_temp)
        console.log(this.high_temp)
        console.log(-5.0 < -2.0)
        console.log(this.low_temp - this.high_temp < 0)
        if(this.low_temp - this.high_temp < 0){
            this.valid_temp = true
            return this.low_temp + " ~ " + this.high_temp
        }else{
            this.valid_temp = false
            return '温度选取没有交集，请重新选择'
        }
    }
},
mounted(){
    this.orderForm.order = uuid4()
    this.get_types()
    this.get_customs()
    this.get_equipment()
},
methods: {
    get_path(){
        if(this.orderForm.custom.length == 0){
            return false
        }
        if(this.office.length == 0){
            return false
        }
        for(var i=0; i< this.custom_list.length; i++){
            if(this.orderForm.custom == this.custom_list[i].id){
                var address = this.custom_list[i].address
            }
        }
        console.log(config.baseurl + '/path/?start=' + this.office + '&end=' +address)
        this.src = config.baseurl + 'path/?start=' + this.office + '&end=' +address
    },
    fill_address(){
        office_get().then(resp=>{
            this.office = resp.data[0].city + resp.data[0].street
            this.get_path()
        })
    },
    change_type(){
        console.log(this.orderForm.type)
        var p_list = []
        var lowest_temp = -270
        var highest_temp = 100
        for(var i=0; i<this.type_list.length; i++){
            var t = this.type_list[i]
            console.log(JSON.stringify(t))
            // 重置禁选项
            t.disabled = false
            // 筛选出已选数据
            if(this.orderForm.type.indexOf(t.id) > -1){
                // t代表已选数据
                // 禁用已选项
                t.disabled = true
                // 比对记录间隔
                this.orderForm.period = t.period
                if(p_list.indexOf(t.period) == -1){
                    p_list.push(t.period)
                }
                // 获取低温中最高的
                if(t.low_temp - lowest_temp > 0){
                    lowest_temp = t.low_temp
                }
                // 获取高温中最低的
                if(t.high_temp - highest_temp < 0){
                    highest_temp = t.high_temp
                }
                // 获取最大延时
                if(t.delay - this.orderForm.delay > 0){
                    if(!this.orderForm.delay == 0){
                        this.$alert('将获取最大启动延时', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                    this.orderForm.delay = t.delay
                }
            }
        }
        this.low_temp = lowest_temp
        this.high_temp = highest_temp
        this.orderForm.low_temp = lowest_temp
        this.orderForm.high_temp = highest_temp
        if(p_list.length > 1){
            this.orderForm.period = '冲突'
        }
        // for(var i=0; i<this.orderForm.type.length; i++){
        //     var t = this.orderForm.type[i]
        //     console.log(JSON.stringify(t)
        // }
    },
    get_equipment(){
        equipment_get().then(resp=>{
            this.equipment_list = resp.data
        })
    },
    get_customs(){
        custom_get().then(resp=>{
            this.custom_list = resp.data
        })
    },
    get_types(){
        type_get().then(resp=>{
            this.type_list = resp.data
        })
    },
    del_type(index){
        this.orderForm.type.splice(index,1)
        this.change_type()
    },
    add_type(){
        this.orderForm.type.push('')
    },
    submitForm(formName) {
        console.log(this.orderForm)
        if(this.orderForm.type.indexOf('') > -1){
            this.$message('存在没有选择的货物类型')
            return false
        }
        this.$refs[formName].validate((valid) => {
            if (valid) {
            } else {
            console.log('error submit!!');
            return false;
            }
        });
        if(this.orderForm.period=='冲突'){
            this.$message('所选货物类型的时间间隔不统一！')
            return false;
        }
        if(this.valid_temp){
            // 发送请求入库
            this.orderForm.origin = this.office
            order_post(this.orderForm).then(resp=>{
                this.$message(resp.data)
            })
        }else{
            this.$message('温度选取没有交集，请重新选择')
        }
    },
    resetForm(formName) {
    this.$refs[formName].resetFields();
        }
    },
    filters:{
        per(value){
            if(value==0){
                return '--'
            }
            if(value=='冲突'){
                return '所选货物类型的时间间隔不统一！'
            }else{
                return value + '分钟/次'
            }
        }
    }
}
</script>
<style>
.box {
    width: 400px;
    .top {
      text-align: center;
    }

    .left {
      float: left;
      width: 60px;
    }

    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }

    .item {
      margin: 4px;
    }

    .left .el-tooltip__popper,
    .right .el-tooltip__popper {
      padding: 8px 10px;
    }
  }
</style>
